<template name="BottomBar">
	<view class="bottom" v-if="inPlay.play_url">
		<view class="bottom-left">
			<image :class="paused ? '' : 'rotation'" :src="inPlay.img" @click="lyric"></image>
			<view class="aideo-info" @click="lyric">
				<view class="audio-name">{{ inPlay.song }}</view>
				<view class="audio-singer">{{ inPlay.singer }}</view>
			</view>
		</view>
		<view class="bottom-right">
			<view class="btn-player">
				<text v-if="paused == false" class="text-black cuIcon-stop" @click="pause"></text>
				<text v-if="paused" class="text-black cuIcon-playfill" @click="play"></text>
			</view>
			<!-- 				<view class="btn-info">
					<text class="text-black cuIcon-list"></text>
				</view> -->
		</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		...mapGetters({
			current_song_no: 'current_song_no',
			inPlay: 'inPlay',
			paused: 'paused',
			play_url: 'play_url'
		})
	},
	methods: {
		...mapMutations([
			'play', //将 `this.play()` 映射为 `this.$store.commit('play')`
			'pause'
		]),
		lyric() {
			uni.navigateTo({
				animationType: 'pop-in', //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
				animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
				url: '/pages/lyric/lyric?id=' + this.inPlay.id
			});
		}
	},
	created() {

	}
};
</script>

<style scoped>
@import url('./index.css');

image {
	border-radius: 50%;
}

.rotation {
	-webkit-transform: rotate(360deg);
	animation: rotation 12s linear infinite;
	-moz-animation: rotation 12s linear infinite;
	-webkit-animation: rotation 12s linear infinite;
	-o-animation: rotation 12s linear infinite;
}
</style>
